<script setup>
import { ref } from 'vue';

const props = defineProps({
  sharedData: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['send-data']);

const message = ref('');

const sendToSiblingB = () => {
  if (message.value.trim()) {
    emit('send-data', `来自组件A: ${message.value}`);
    message.value = '';
  }
};
</script>

<template>
  <div class="sibling sibling-a">
    <h4>组件 A</h4>
    
    <div class="input-section">
      <label>发送消息给组件 B：</label>
      <input 
        v-model="message" 
        type="text" 
        placeholder="输入消息"
        class="sibling-input"
      />
      <button 
        class="send-btn" 
        @click="sendToSiblingB"
        :disabled="!message.trim()"
      >
        发送
      </button>
    </div>
    
    <div class="receive-section">
      <h5>收到的消息：</h5>
      <p class="received-message">
        {{ sharedData && sharedData.includes('来自组件B') ? sharedData : '暂无消息' }}
      </p>
    </div>
  </div>
</template>

<style scoped>
.sibling {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
  flex: 1;
}

.sibling-a h4 {
  color: #2196f3;
  margin-bottom: 1rem;
}

.input-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

.input-section label {
  font-weight: 500;
  color: #333;
  font-size: 0.9rem;
}

.sibling-input {
  padding: 0.6rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 0.9rem;
}

.sibling-input:focus {
  outline: none;
  border-color: #2196f3;
}

.send-btn {
  background: #2196f3;
  color: white;
  border: none;
  padding: 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.3s ease;
}

.send-btn:hover:not(:disabled) {
  background: #1976d2;
}

.send-btn:disabled {
  background: #ccc;
  cursor: not-allowed;
}

.receive-section h5 {
  color: #666;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.received-message {
  background: #e3f2fd;
  padding: 0.8rem;
  border-radius: 6px;
  border-left: 4px solid #2196f3;
  font-size: 0.9rem;
  color: #1565c0;
  min-height: 50px;
  display: flex;
  align-items: center;
}
</style>